import React, { Component } from 'react'
import { ShopO, TodoList } from '@react-vant/icons'
import { Toast, NavBar, Typography, Input, Radio, Cell, SubmitBar, Button} from 'react-vant';
import '../App.scss'
import Mytao from './conponents/Mytao';
import dayjs from 'dayjs';
import Ctx from './store/Ctx';

//充值页面
export default class Recharge extends Component {

  static contextType = Ctx

  state = {
    num: '',//数量
    payType: '微信',//支付方式
    paylist: [ //支付选择的列表
      { icon: <ShopO />, title: '微信' },
      { icon: <ShopO />, title: '支付宝' },
      { icon: <ShopO />, title: '现金' }
    ],
    totallist: [50, 200, 500, 1000, 1500, 2000],//选择的金额
    totalIndex: 0//切换金额的索引
  }

  //切换高亮
  settotal = (index) => {
    this.setState({ totalIndex: index })
  }

  //计算合计
  get totals() {
    let { num, totallist, totalIndex } = this.state
    //如果数量没有输入 返回0
    if (!num) {
      return 0
    }
    return num * totallist[totalIndex]
  }

  render() {

    /* console.log(this.props); */
    //获取到标题
    let { title } = this.props.match.params
    let { num, payType, paylist, totallist, totalIndex } = this.state
    return (
      <div className='reahargebox'>
        <NavBar
          title={title}
          leftText="返回"
          onClickLeft={() => {
            this.props.history.push('/home')
          }}
        />
        {/* 文本组件 */}
        <div style={{ margin: '20px 10px' }}>
          <Typography.Title level={6}>{title}</Typography.Title>
          {/* 封装的j金额 */}
          <Mytao data={totallist} dataIndex={totalIndex} setIndex={this.settotal}></Mytao>

          <Typography.Title level={6}>充值数量</Typography.Title>
          <div className='rechargeInput'>
            <Input
              value={num}
              type='number'
              onChange={text => this.setState({ num: text })}
              placeholder='请输入数量'
            />
          </div>


          <Typography.Title level={6}>支付方式</Typography.Title>
          {/* 单选框 */}
          <Radio.Group value={payType} onChange={(v) => {
            //console.log(v);
            this.setState({ payType: v })

          }}>
            <Cell.Group>
              {
                paylist.map((item, index) => {
                  return <Cell
                    clickable
                    key={index}
                    title={item.title}
                    icon={item.icon}
                    rightIcon={<Radio name={item.title} />}
                  />
                })
              }
            </Cell.Group>
          </Radio.Group>
        </div>

        <div className="demo-submit-bar">
          <SubmitBar
            price={this.totals * 100}
            button={<Button type='danger'
              style={{ width: '100px', position: 'relative', left: '20px' }} onClick={() => {
                //1.判断num不能为空
                if (!num) {
                  Toast.fail('数量不能为空')
                  return
                }
                //2.整理数据添加
                let obj = {
                  id:new Date().getTime(),
                  title,//充值名称
                  time:dayjs().format('YYYY-MM-DD HH:mm:ss'),//下单时间
                  total:totallist[totalIndex],
                  num,//数量
                  alltotal:this.totals,//总计
                  payType,//支付方式
                  sed:false,
                  del:false
                }
                //执行添加的方法
                this.context.add(obj)                
                //3.跳转到记录页面去
                this.props.history.push('/record')
              }}>支付</Button>}
          />
        </div>
      </div>
    )
  }
}
